import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { Button, Modal, List, Radio } from 'antd-mobile'

const RadioItem = Radio.RadioItem;
// 操作模式
export const BottomAction = {
    sleep: 0,
    circle: 1,
}

/**
 * 底部弹出视图
 */
class BottomActionSheet extends Component {
    constructor(props, context) {
        super(props, context);
        let current = this.props.current;
        this.complete = this.complete.bind(this);
        this.dismiss = this.dismiss.bind(this);
        this.state = {
            current: current,
        };
    }

    onChange = (value) => {
        this.setState({
            current: value,
        });
    };

    complete() {
        let value = this.state.current;
        if (this.props.action === BottomAction.circle) { 
            // 设置播放模式,传入props参数之前自减, 返回会去自增1
            value += 1;
        }
        let action = this.props.action;
        this.props.actionFuc({action,value});
    }

    dismiss() {
        this.props.actionFuc();
    }

    render() {
        return (
            <Modal
                popup
                visible
                onClose={this.dismiss}
                animationType="slide-up"
            >   
                <List renderHeader={() => this.props.title}>
                    {this.props.list.map((item, i) => (
                        <RadioItem key={item.data} checked={this.state.current === i} onChange={() => this.onChange(i)}>
                            {item.data}
                        </RadioItem>
                    ))}
                </List>

                <div style={{ display: "flex", alignItems: "center", justifyContent: 'center',width:'100%'}}>
                    <Button type="primary"
                        style={{ width: '70%', marginTop: 16, marginBottom: 26 }}
                        onClick={this.complete}>
                        完成
                    </Button>
                </div>
            </Modal>
        );
    }
}

BottomActionSheet.propTypes = {
    title: PropTypes.string.isRequired,
    list: PropTypes.array.isRequired,
    current: PropTypes.number.isRequired,
};

export default BottomActionSheet;